<template>
	<view class="user">
		<view class="bck_top">
			<u-icon v-show="isLogin" @click="move_show=true" name="setting" color="#fff" size="20" ></u-icon>
		</view>
		<!-- 登陆后 -->
		<view class="header" v-if="isLogin">
			
			<image :src="info.avatar" mode=""></image>
			</br>
			<text style="font-size: 32rpx;font-family:'仓耳渔阳体';">{{info.username}}</text>
			</br>
			<text style="font-size: 10px; color: #ccc;">id：{{info.id.slice(0,5)}}</text>
		</view>
		
		<!-- 没登陆 -->
		<view class="header" v-else>
			<image src="../../static/logo.png" mode=""></image>
			</br>
			<text style="font-size: 32rpx;font-family:'仓耳渔阳体';">HI~欢迎来到小莱社区</text>
			</br>
			<text style="font-size: 10px; color: #ccc;">登陆后解锁更多功能</text>
			<view class="login_botton">
				<text>登录/注册</text>
			</view>
		</view>
	
		<view class="main">
			<view class="cell_box">
				<text class="title">商城</text>
				<u-cell title="我的购物车" :isLink="true" arrow-direction="right"></u-cell>
				<u-cell title="我的订单" :isLink="true" arrow-direction="right"></u-cell>
				<u-cell title="我的地址" :isLink="true" arrow-direction="right"></u-cell>

			</view>
			<view class="cell_box">
				<text class="title">租房</text>
				<u-cell title="我发布的房源" :isLink="true" arrow-direction="right"></u-cell>
				<u-cell title="我的关注" :isLink="true" arrow-direction="right"></u-cell>
				<u-cell title="全部订单" :isLink="true" arrow-direction="right"></u-cell>

			</view>
			<view class="cell_box">
				<text class="title">朋友圈</text>
				<u-cell title="我的发布" :isLink="true" arrow-direction="right"></u-cell>
				<u-cell title="我的点赞" :isLink="true" arrow-direction="right"></u-cell>
				<u-cell title="我的评论" :isLink="true" arrow-direction="right"></u-cell>

			</view>

		</view>
		
		
		<!-- 弹出层 -->
		<u-popup :show="move_show" @close="close" mode="right">
		            <view>
		                <text>出淤泥而不染，濯清涟而不妖</text>
		            </view>
				</u-popup>
	</view>
</template>

<script>
	import {mapState} from "vuex"
	export default {
		data() {
			return {
	move_show:false
			}
		},
		computed:{
			...mapState('users',['info','isLogin'])
		},
		methods: {
close(){
	this.move_show=false
}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-icon[data-v-2ee87dc9]{
		float: right;
	}
	.user {
		box-sizing: border-box;
		width: 750rpx;
		height: calc(100vh - 50px);
		background-color: aliceblue;

		.bck_top {
			width: 750rpx;
			height: 300rpx;
			background: linear-gradient(to bottom, #3DA7FB, #fff);
			border-radius: 0 0 300rpx 300rpx;
			
		}
	}

	.header {
		margin: 0 auto;
		width: 678rpx;
		background-color: #fff;
		// height: 300rpx;
		margin-top: -100rpx;
		border-radius: 36rpx;
		box-sizing: border-box;
		padding: 26rpx;
		padding-top: 0;
	
	image {
			border-radius: 50%;
			width: 100rpx;
			height: 100rpx;
			margin-top: -30rpx;
			filter: drop-shadow(6rpx 10rpx 3px rgba(0, 0, 0, .2))
		}

		.login_botton {
			margin-top: 30rpx;
			text-align: center;
			width: 200rpx;
			background-color: #3DA7FB;
			font-size: 14px;
			padding: 20rpx 30rpx;
			border-radius: 20rpx;
			color: #fff;
		}
	}

	.main {

		padding: 26rpx;

		.cell_box {
			margin-top: 16rpx;
			padding: 16rpx;
			background-color: #fff;
			border-radius: 16rpx 0;

			.title {
				display: block;
				font-size: 16px;
				font-family: "仓耳渔阳体";
				margin-left: 16rpx;
			}
		}
	}
</style>
